<template>
  <div class="user">
    <div class="topBar">
      <van-icon class="i_left" name="arrow-left" @click="$router.back()" />
      <span>我的期权</span>
    </div>
    <div class="optionBox optionBox0">
      <div class="optionData flex_start">
        <div class="line"></div>
        <div class="optionCol">
          <h3>{{sysInfo.option_total || 0}}</h3>
          <p>本期派发期权总数</p>
        </div>
        <div class="optionCol">
          <h3>{{sysInfo.option_left || 0}}</h3>
          <p>期权剩余数量</p>
        </div>        
      </div>
    </div>
    <div class="optionBox optionBox1">
      <div class="optionData flex_start">
        <div class="line"></div>
        <div class="optionCol">
          <h3>{{member.score || 0}}</h3>
          <p>水滴</p>
        </div>
        <div class="optionCol">
          <h3>{{member.option || 0}}</h3>
          <p>期权</p>
        </div>        
      </div>
      <div class="optionBtn" @click="showPopup">兑换期权</div>
    </div>
    <div class="incomeDetail">
      <van-row class="d_head">
        <van-col span="7">水滴</van-col>
        <van-col span="6">期权</van-col>
        <van-col span="11">时间</van-col>
      </van-row>
      <van-empty v-if="list.length == 0 && finished" description="暂无数据" />
      <van-list
        v-model="loading"
        :finished="finished"
        :immediate-check="true"
        @load="getList"
      >
        <van-row class="d_body" v-for="(i, idx) in list" :key="idx">
          <van-col span="7">{{i.val}}</van-col>
          <van-col span="6">{{i.val / 10}}</van-col>
          <van-col span="11">{{i.created_at}}</van-col>
        </van-row>
      </van-list>
    </div> 
    <van-popup v-model="show" round>
      <div class="exchagePop">
        <h3>兑换期权 (10兑1)</h3>
        <p>可换期权: <span class="f_blue">{{parseInt(member.score / 10)}}</span></p>
        <van-field v-model="score" input-align="right" label="水滴:" placeholder="输入水滴数量" />
        <div class="confirmBtn" @click="scoreApply">兑换期权</div>            
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data () {
    return {
      score: '',
      active:0,
      show: false,
      member: {},
      list: [],
      page: 0,
      loading: false,
      finished: false,
      sysInfo: {},
    };
  },
  created () {
    this.getMember()
    this.getSysInfo()
  },
  methods: {
    showPopup() {
      this.score = ''
      this.show = true;
    },
    getMember() {
      this.sendReq('member/getInfo', {}, r => {
        this.member = r
      })
    },
    getSysInfo() {
      this.sendReq('home/sysInfo', {id: 1}, r => {
        this.sysInfo = r
      })
    },
    scoreApply() {
      this.sendReq('member/applyScore', {score: this.score}, r => {
        this.show = false;
        this.getMember()
        this.getSysInfo()
        this.page = 0
        this.list = []
        this.loading = true
        this.finished = false
        this.getList()
      })
    },
    getList () {
      this.loading = true
      this.page++
      this.sendReq('member/scoreApplyList', {  page: this.page }, r => {
        this.list = this.list.concat(r)
        if (r.length == 0) {
          this.finished = true
        }
        this.loading = false
      })
    },
  }
};
</script>

<style lang="less" scoped>
.user{
  padding:42px 15px 0 15px;
}
.exchagePop{
  width: 267px;
  background: #fff;
  border-radius: 10px;
  padding:22px 10px; 
  h3{font-size: 15px;font-weight: 400;color: #000000;text-align:center;}
  p{font-size: 13px;font-weight: 400;color: #666666;text-align:center;margin-top:15px;}
  .van-cell{
    border: 1px solid #DCDCDC;
    margin-top:20px;
  }
  .confirmBtn{width: 109px;height: 32px;background: #389EFF;border-radius: 16px;font-size: 13px;font-weight: 400;color: #FFFFFF;text-align:center;line-height:32px;margin:28px auto 0 auto;}
}
.optionBox{
  margin-top:10px;
  width: 350px;
  height: 158px;
  background: #389EFF;
  border-radius: 10px;
  .optionData{
    position:relative;
    .line{
      width: 1px;
      height: 26px;
      background: #389EFF;
      opacity: 0.3;
      position:absolute;
      left:50%;
      transform:translateY(50%);
      top:50%;
      margin-top:-13px;
    }
  }
  .optionCol{
    text-align:center;
    color:#fff;
    flex:1;
    margin-top:32px;
    p{font-size: 12px;font-weight: 400;margin-top:5px;}
    h3{font-size: 25px;font-weight: 500;}
  }
  .optionBtn{
    width: 117px;
    height: 34px;
    background:#389EFF;
    border-radius: 17px; 
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
    text-align:center;
    line-height:34px;  
    margin:20px auto 0 auto;  
  }
  &.optionBox0 {
    height: 120px;
  }
  &.optionBox1 {
    background: #fff;
    .optionCol{
      color:#389EFF;
    }
  }
}
.incomeDetail{
  width: 350px;
  background: #FFFFFF;
  border-radius: 5px;
  margin-top:8px;
  padding-bottom:8px;
  .d_head{
    font-size: 12px;
    font-weight: 400;
    color: #999999;
    .van-col{padding:15px 15px 8px 15px;} 
  }
  .d_body{
      .van-col{padding:8px 15px;} 
      font-size: 14px;
      font-weight: 400;
      color: #000000;
  }
}

</style>
